<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <title> 爱心</title>

    <meta NAME="Generator" CONTENT="EditPlus">

    <meta NAME="Author" CONTENT="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

    <meta NAME="Keywords" CONTENT="">

    <meta NAME="Description" CONTENT="">
    <link type="text/css" rel="stylesheet" href="/css/index.css"/>
    <!--引入vue得依赖必须再elementui之前引入vue-->
    <script type="text/javascript" src="/js/vue.js"></script>
    <script type="text/javascript" src="/js/index.js"></script>
    <script type="text/javascript" src="/js/axios.min.js"></script>
    <script type="text/javascript" src="/js/qs.min.js"></script>
    <audio controls autoplay="autoplay" hidden="hidden"  id="bgmusic">
        <source src="./mp3/1.mp3">
        <embed  type="Audio/mp3" src="./mp3/1.mp3">
    </audio>

    <script src="https://files.cnblogs.com/files/quaint/sakuraPlus.js"></script>
<!--    <audio src="./mp3/1.mp3" autoplay="autoplay" controls="controls" loop="loop" preload="auto" type></audio>-->
    <style>
        /* 小屏幕手机端 */
        @media (min-width: 0px) and (max-width:768px) {
            .div1{
                width: 100px;
                height: 100px;
                background-color: red;
            }
        }

        /* 中等屏幕（桌面显示器，大于等于 992px） */
        @media (min-width: 768px) and (max-width:992px){
            .div1{
                width: 300px;
                height: 300px;
                background-color: blue;
            }
        }

        /* 大屏幕（大桌面显示器，大于等于 1200px） */
        @media (min-width: 992px) {
            .div1{
                width: 500px;
                height: 500px;
                background-color: aqua;
            }
        }
        html, body {

            height: 100%;

            padding: 0;

            margin: 0;

            background: #000;

        }

        canvas {

            position: absolute;

            width: 100%;

            height: 100%;

        }
        .heart{
            position: relative;
            width: 600px;
            height: 600px;
            margin: 10px auto;
            animation: move 1s infinite alternate;
        }
        @-webkit-keyframes move {
            15%{transform: scale(0.99);}
            30%{transform: scale(1.08);}
            45%{transform: scale(1.11);}
            60%{transform: scale(1.08);}
            75%{transform: scale(1.11);}
            90%{transform: scale(0.99);}
        }



    </style>

</head>

<body >

<div id="app">
<div class="heart">
    <canvas id="pinkboard"></canvas>
    <div style="color: #ea80b0;float: left;position: relative;left: 42%;font-size: 20px;top: 40%"><b>{{a}}同学<br></b></div>
    <div style="color: #ea80b0;float: left;position: relative;left: 18%;font-size: 20px;top: 48%"><b style="">无论何时何地都要开心</b></div>

</div>
</div>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            a:'',
        },created() {
            this.formatter();
        },
        methods:{

            formatter() {
                var test = window.location.search;
                var url = decodeURI(decodeURI(test));
                var b = url.substr(test.lastIndexOf("?") + 1);
                this.a=b
                console.log(test)
                console.log(b)

            }

        }
    })
</script>

<script>
    function toggleSound() {
        var music = document.getElementById("bgmusic");//获取ID
        if (music.paused) { //判读是否播放
            music.paused=false;
            music.play(); //没有就播放
        }

    }
    setInterval("toggleSound()",1);

    var a=100;
    var t1 = window.setTimeout(hello,2000);
    function hello(){
        var t2 = window.setTimeout(hello, 3000);
        var b=t2%3;
        a=a*b
        this.velocity=a
        console.log(this.velocity)

    }

    var settings = {

        particles: {

            length: 500,

            duration: 2,

            velocity: 100,

            effect: -0.75,

            size: 30,

        },

    };








    (function(){var b=0;var c=["ms","moz","webkit","o"];for(var a=0;a<c.length&&!window.requestAnimationFrame;++a){window.requestAnimationFrame=window[c[a]+"RequestAnimationFrame"];window.cancelAnimationFrame=window[c[a]+"CancelAnimationFrame"]||window[c[a]+"CancelRequestAnimationFrame"]}if(!window.requestAnimationFrame){window.requestAnimationFrame=function(h,e){var d=new Date().getTime();var f=Math.max(0,16-(d-b));var g=window.setTimeout(function(){h(d+f)},f);b=d+f;return g}}if(!window.cancelAnimationFrame){window.cancelAnimationFrame=function(d){clearTimeout(d)}}}());



    var Point = (function() {

        function Point(x, y) {

            this.x = (typeof x !== 'undefined') ? x : 0;

            this.y = (typeof y !== 'undefined') ? y : 0;

        }

        Point.prototype.clone = function() {

            return new Point(this.x, this.y);

        };

        Point.prototype.length = function(length) {

            if (typeof length == 'undefined')

                return Math.sqrt(this.x * this.x + this.y * this.y);

            this.normalize();

            this.x *= length;

            this.y *= length;

            return this;

        };

        Point.prototype.normalize = function() {

            var length = this.length();

            this.x /= length;

            this.y /= length;

            return this;

        };

        return Point;

    })();


    var Particle = (function() {

        function Particle() {

            this.position = new Point();

            this.velocity = new Point();

            this.acceleration = new Point();

            this.age = 0;

        }

        Particle.prototype.initialize = function(x, y, dx, dy) {

            this.position.x = x;

            this.position.y = y;

            this.velocity.x = dx;

            this.velocity.y = dy;

            this.acceleration.x = dx * settings.particles.effect;

            this.acceleration.y = dy * settings.particles.effect;

            this.age = 0;

        };

        Particle.prototype.update = function(deltaTime) {

            this.position.x += this.velocity.x * deltaTime;

            this.position.y += this.velocity.y * deltaTime;

            this.velocity.x += this.acceleration.x * deltaTime;

            this.velocity.y += this.acceleration.y * deltaTime;

            this.age += deltaTime;

        };

        Particle.prototype.draw = function(context, image) {

            function ease(t) {

                return (--t) * t * t + 1;

            }

            var size = image.width * ease(this.age / settings.particles.duration);

            context.globalAlpha = 1 - this.age / settings.particles.duration;

            context.drawImage(image, this.position.x - size / 2, this.position.y - size / 2, size, size);

        };

        return Particle;

    })();




    var ParticlePool = (function() {

        var particles,

            firstActive = 0,

            firstFree = 0,

            duration = settings.particles.duration;

        function ParticlePool(length) {


            particles = new Array(length);

            for (var i = 0; i < particles.length; i++)

                particles[i] = new Particle();

        }

        ParticlePool.prototype.add = function(x, y, dx, dy) {

            particles[firstFree].initialize(x, y, dx, dy);


            firstFree++;

            if (firstFree == particles.length) firstFree = 0;

            if (firstActive == firstFree ) firstActive++;

            if (firstActive == particles.length) firstActive = 0;

        };

        ParticlePool.prototype.update = function(deltaTime) {

            var i;

            if (firstActive < firstFree) {

                for (i = firstActive; i < firstFree; i++)

                    particles[i].update(deltaTime);

            }

            if (firstFree < firstActive) {

                for (i = firstActive; i < particles.length; i++)

                    particles[i].update(deltaTime);

                for (i = 0; i < firstFree; i++)

                    particles[i].update(deltaTime);

            }


            while (particles[firstActive].age >= duration && firstActive != firstFree) {

                firstActive++;

                if (firstActive == particles.length) firstActive = 0;

            }

        };

        ParticlePool.prototype.draw = function(context, image) {

            if (firstActive < firstFree) {

                for (i = firstActive; i < firstFree; i++)

                    particles[i].draw(context, image);

            }

            if (firstFree < firstActive) {

                for (i = firstActive; i < particles.length; i++)

                    particles[i].draw(context, image);

                for (i = 0; i < firstFree; i++)

                    particles[i].draw(context, image);

            }

        };

        return ParticlePool;

    })();


    (function(canvas) {

        var context = canvas.getContext('2d'),

            particles = new ParticlePool(settings.particles.length),

            particleRate = settings.particles.length / settings.particles.duration, // particles/sec

            time;


        function pointOnHeart(t) {

            return new Point(

                160 * Math.pow(Math.sin(t), 3),

                130 * Math.cos(t) - 50 * Math.cos(2 * t) - 20 * Math.cos(3 * t) - 10 * Math.cos(4 * t) + 25

            );

        }


        var image = (function() {

            var canvas = document.createElement('canvas'),

                context = canvas.getContext('2d');

            canvas.width = settings.particles.size;

            canvas.height = settings.particles.size;


            function to(t) {

                var point = pointOnHeart(t);

                point.x = settings.particles.size / 2 + point.x * settings.particles.size / 350;

                point.y = settings.particles.size / 2 - point.y * settings.particles.size / 350;

                return point;

            }


            context.beginPath();

            var t = -Math.PI;

            var point = to(t);

            context.moveTo(point.x, point.y);

            while (t < Math.PI) {

                t += 0.01;

                point = to(t);

                context.lineTo(point.x, point.y);

            }

            context.closePath();


            context.fillStyle = '#ea80b0';

            context.fill();


            var image = new Image();

            image.src = canvas.toDataURL();

            return image;

        })();


        function render() {


            requestAnimationFrame(render);


            var newTime = new Date().getTime() / 1000,

                deltaTime = newTime - (time || newTime);

            time = newTime;


            context.clearRect(0, 0, canvas.width, canvas.height);



            var amount = particleRate * deltaTime;

            for (var i = 0; i < amount; i++) {

                var pos = pointOnHeart(Math.PI - 2 * Math.PI * Math.random());

                var dir = pos.clone().length(settings.particles.velocity);

                particles.add(canvas.width / 2 + pos.x, canvas.height / 2 - pos.y, dir.x, -dir.y);

            }

// update and draw particles

            particles.update(deltaTime);

            particles.draw(context, image);

        }


        function onResize() {

            canvas.width = canvas.clientWidth;

            canvas.height = canvas.clientHeight;

        }

        window.onresize = onResize;


        setTimeout(function() {

            onResize();

            render();

        }, 10);

    })(document.getElementById('pinkboard'));



</script>



</body>

</html>